<script setup lang='ts' name="rights-management-add">
import { ElIcon } from 'element-plus'
import { nextTick, ref, toRefs } from 'vue'

const props = withDefaults(defineProps<{
    data?: any
}>(), {
    data: () => [],
})
const emits = defineEmits(['update:modelValue', 'doAction', 'rowClick'])
const { data } = toRefs(props)

const form = ref<any>({ code: '', description: '', display_name: '', group_name: '', module_name: '' })

function rowClick(index: number) {
    data.value.forEach((v: any) => {
        v.active = false
    })
    data.value[index].active = true

    emits('rowClick', data.value[index])
}

async function doAction(val: any) {
    emits('doAction', val)
}

async function init() {
    await nextTick()
    emits('doAction')
    console.log(form, data)
}

defineExpose({
    init,
})
</script>

<template>
    <div class="tree-box">
        <template v-for="(item, index) in data"
                  :key="index"
        >
            <div class="tree-item"
                 :class="{ active_item: item.active }"
                 @click="rowClick(index)"
            >
                <ElIcon>
                    <Menu />
                </ElIcon>
                &nbsp;{{ item.groupName }}
                <span v-show="item.active"
                      class="action"
                >
                    <ElIcon @click="doAction({ item, type: 'edit' })">
                        <EditPen />
                    </ElIcon>
                    &nbsp;&nbsp;
                    <ElIcon @click="doAction({ item, type: 'delete' })">
                        <Delete />
                    </ElIcon>
                </span>
            </div>
        </template>
    </div>
</template>

<style lang="less">
.tree-box {
    .tree-item {
        height: 30px;
        line-height: 30px;
        padding: 0 20px;

        .action {
            float: right;

            i {
                cursor: pointer;
            }
        }
    }

    .active_item {
        background: #fff0f0;
    }
}
</style>
